<template>
	<view class="page" >
		
		<poster ref="poster" @closePost="closePost" v-if="posterShow"></poster>
		<!-- <image class="QRimg" :src="info.qrcode"></image> -->
		<!-- <canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas> -->
	
	</view>
</template>

<script>
	import poster from '../../components/zywPosterSmall.vue';
	// import UQRCode from 'uqrcodejs'
	import wxqrcode from '@/asset/lib/wxqrcode.js'
	export default {
		components:{
			poster
		},
		data() {
			return {
				posterShow: false,
				info: {
					invite_qrcode: '111111',
					invite_code: '1111111',
					invite_url: '1111111',
					inviter_code:'',
					link:'',
					qrcode:''
				}
			}
		},
		onLoad(opt) {
			var pid = opt.pid
			var url ='http://zygq.opo5.com/qwc/#/pages/login/registerUser?invite_code='+pid
			this.info.link = url
			// this.info.inviter_code = pid
		},
		onReady() {
			
		},
		onShow() {
				var  le  = wxqrcode.createQrCodeImg(this.info.link,{
					typeNumber:7
				})
				this.info.qrcode = le.replace('image/gif','image/png')
				this.openPost();
		
		},
		
		
		methods: {
			back(){
				uni.navigateBack()
			},
			closePost() {
				this.posterShow = false;
			},
			openPost() {
				  
				var bg_url = '../../static/can_bg.png'
				
				 // #ifdef H5
					bg_url = ""
				// #endif
				 var bg_bottom=''
				 
				let postData = {
					link: this.info.link,
					content:this.info.inviter_code,
					bg_url: bg_url,
					qr_url :  this.info.qrcode,
					bg_bottom:bg_bottom,
					devicePixelRatio:this.devicePixelRatio,
					popWidth:this.popWidth
					// avatar :this.info.avatar
				};
				uni.showLoading({
					title: '生成中ing...',
					mask: true
				});
				this.posterShow = true;
				setTimeout(() => {
					this.$refs.poster.drawPoster(postData); //在组件内drawPoster()函数编写需要绘制的内容
				}, 10);
			},
			svaeQrcode(url) {
				this.custom.tool.saveHttpImage(url);
			}
		}
	}
</script>

<style scoped>
	page {
		overflow: hidden;
	}

	.page {
		 height: 100vh;
		/*
		width: 100%;
		background-size: 100% 100%;
		background-repeat: no-repeat; */
		/* overflow: hidden; */
		background-color: #FE903D;
		overflow: hidden;
	}
	.page-top-title{
		color:#fff;
		font-size: 36upx;
		height: 20vh;
		line-height: 20vh;
		text-align: center;
	}
	.footer{
		width:90%;
		margin: auto;
		display: flex;
		flex-flow: nowrap row;
		align-items: center;
		justify-content: space-between;
		color:#fff;
		font-size: 36upx;
		margin-top: 180upx;
	}
	.footer-left,.footer-right{
		width:130upx;
		height: 14upx;
		display: flex;
		flex-flow: nowrap row;
		align-items: center;
	}
	.footer-left::before{
		display: block;
		content: ' ';
		background-color: #fff;
		height: 4upx;
		width: 114upx;
	}
	.footer-left::after{
		display: block;
		content: ' ';
		background-color: #fff;
		height: 16upx;
		width: 14upx;
		border-radius: 50%;
	}
	.footer-right::before{
		display: block;
		content: ' ';
		background-color: #fff;
		height: 16upx;
		width: 14upx;
		border-radius: 50%;
	}
	.footer-right::after{
		display: block;
		content: ' ';
		background-color: #fff;
		height: 4upx;
		width: 114upx;
	}
	.footer-text{
	}
	.share-window{
		width:85%;
		margin: auto;
		height: auto;
		padding: 40upx 0;
		background-color: rgba(0,0,0,0.3);
		border-radius: 10upx;
	}
	.code-text{
		width:100%;
		font-size: 32upx;
		color:#fff;
		text-align: center;
		height: auto;
	}
	.copy{
		
		color:#fff;
		font-size: 28upx;
		width:100%;
		display: flex;
		flex-flow: column wrap;
		align-items: center;
		justify-content: center;
	}
	.code-text-box{
		background-color: rgba(0,0,0,0.3);
		width:280upx;
		height: 62upx;
		border-radius: 10upx;
		display: flex;
		flex-flow: nowrap row;
		align-items: center;
		justify-content: center;
		margin-top: 20upx;
	}
	.copy-title{
		font-size: 30upx;
	}
	.copy-text{
		border-bottom: solid 1px #199EF6;
		margin-top: 20upx;
		padding-bottom: 2upx;
	}
	.qrcode{
		width:85%;
		display: flex;
		flex-flow: nowrap row;
		align-items: center;
		justify-content: center;
		height: auto;
		margin: auto;
		margin-top:50upx;
		padding-top: 30upx;
		border-top:dashed 1px #CBCACA;
	}
	.qrcode>image{
		width:260upx;
	}
	.but{
		width:100%;
		display: flex;
		flex-flow: nowrap row;
		align-items: center;
		justify-content: center;
		height: auto;
		margin-top: 46upx;
		margin-bottom: 10upx;
	}
	.but-item{
		width:180upx;
		height: 50upx;
		line-height: 50upx;
		color:#fff;
		font-size: 26upx;
		border-radius: 30upx;
		border:solid 1px #fff;
		text-align: center;
	}
	.but-item:last-of-type{
		margin-left: 50upx;
	}
</style>
